<template>
  <div class="system-log-search-form-container">
    <el-form
      label-width="100px"
      :inline="true"
      :model="searchForm"
    >
      <el-date-picker
        size="small"
        v-model="searchForm.startTime"
        type="datetime"
        placeholder="选择查询开始日期时间"
      ></el-date-picker>&nbsp;至
      <el-date-picker
        size="small"
        v-model="searchForm.endTime"
        type="datetime"
        placeholder="选择查询结束日期时间"
      ></el-date-picker>
      <el-button
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="search"
        :loading="searchForm.btnLoading"
      >查询</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'searchForm'
  },
  props: {
    searchForm: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    search() {
      this.$emit('searchHistory');
    }
  }
};
</script>

<style lang="scss" scoped>
.system-log-search-form-container {
  display: flex;
  flex-direction: row;
  .el-date-editor--datetime {
    width: 200px !important;
  }
  .el-button--primary {
    margin-left: 10px;
    background-color: #2c83b1 !important;
    border-color: #2c83b1 !important;
  }
  .el-input {
    width: 250px;
  }
  .el-select {
    width: 250px;
  }
  .el-form-item {
    margin-right: 200px;
  }
}
</style>
